import { View, Text } from "@tarojs/components";
import { AtAvatar, AtIcon } from "taro-ui";
import { getUserProfile, loginAndGetUserInfo } from "../../utils/auth";
import { useState } from "react";
import "./index.scss";

const Profile = () => {
  const [userInfo, setUserInfo] = useState({
    avatarUrl: "默认头像URL",
    nickName: "未登录",
  });

  const handleLogin = async () => {
    try {
      const userInfo = await getUserProfile();
      setUserInfo(userInfo);
      // 这里可以调用后端接口进行登录
      await loginAndGetUserInfo();
    } catch (error) {
      console.error("登录失败：", error);
    }
  };

  return (
    <View className="profile">
      {/* 顶部登录区域 */}
      <View className="profile-header" onClick={handleLogin}>
        <View className="avatar-wrap">
          <AtAvatar circle image={userInfo.avatarUrl} />
        </View>
        <View className="login-btn">{userInfo.nickName || "登录/注册"}</View>
      </View>

      {/* 金刚区 */}
      <View className="quick-entry">
        <View className="entry-item">
          <AtIcon value="credit-card" size="24" />
          <Text>钱包</Text>
        </View>
        <View className="entry-item">
          <AtIcon value="money" size="24" />
          <Text>预付金额</Text>
        </View>
        <View className="entry-item">
          <AtIcon value="blocked" size="24" />
          <Text>优惠券</Text>
        </View>
      </View>

      {/* 订单区域 */}
      <View className="order-section">
        <View className="section-title">我的订单</View>
        <View className="order-types">
          <View className="type-item">
            <AtIcon value="credit-card" size="24" />
            <Text>待付款</Text>
          </View>
          <View className="type-item">
            <AtIcon value="shopping-bag" size="24" />
            <Text>待发货</Text>
          </View>
          <View className="type-item">
            <AtIcon value="blocked" size="24" />
            <Text>待收货</Text>
          </View>
          <View className="type-item">
            <AtIcon value="message" size="24" />
            <Text>待评价</Text>
          </View>
          <View className="type-item">
            <AtIcon value="blocked" size="24" />
            <Text>退款/售后</Text>
          </View>
        </View>
      </View>

      {/* 常用服务 */}
      <View className="common-services">
        <View className="section-title">常用服务</View>
        <View className="services-grid">
          <View className="service-item">
            <AtIcon value="money" size="24" />
            <Text>退押金</Text>
          </View>
          <View className="service-item">
            <AtIcon value="blocked" size="24" />
            <Text>我的账单</Text>
          </View>
          <View className="service-item">
            <AtIcon value="file-generic" size="24" />
            <Text>我的发票</Text>
          </View>
          <View className="service-item">
            <AtIcon value="blocked" size="24" />
            <Text>检疫证明</Text>
          </View>
          <View className="service-item">
            <AtIcon value="home" size="24" />
            <Text>门店认证</Text>
          </View>
        </View>
      </View>

      {/* 帮助中心 */}
      <View className="help-center">
        <View className="section-title">帮助中心</View>
        <View className="help-items">
          <View className="help-item">
            <AtIcon value="help" size="24" />
            <Text>常见问题</Text>
          </View>
          <View className="help-item">
            <AtIcon value="file-generic" size="24" />
            <Text>售后规则</Text>
          </View>
        </View>
      </View>
    </View>
  );
};

export default Profile;
